<button type="button" class="btn btn-primary" (click)="openModal(template)">Open first modal</button>

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">First modal</h4>
    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
      <span aria-hidden="true" class="visually-hidden">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is a first modal<br />
    <button type="button" class="btn btn-primary" (click)="openModal2(templateNested)">Open second modal</button>
    <button type="button" class="btn btn-primary" (click)="closeModal(1)">Close self</button>
    <button type="button" class="btn btn-primary" (click)="closeModal()">Close all modal</button>
  </div>
</ng-template>

<ng-template #templateNested>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Second modal</h4>
    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef2?.hide()">
      <span aria-hidden="true" class="visually-hidden">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is nested modal.<br />
    <button *ngIf="modalRef" type="button" class="btn btn-danger" (click)="closeFirstModal()">Close first modal</button>
    <button type="button" class="btn btn-danger" (click)="closeModal(2)">Close self</button>
    <button type="button" class="btn btn-danger" (click)="closeModal()">Close all modal</button>
  </div>
</ng-template>
